<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<view class="user-space-header grace-flex-center grace-flex-vcenter grace-relative" style="height: 500rpx; overflow: hidden;">
				<image :src="getBgImg" mode="widthFix" lazy-load style="width: 100%;" @click.stop="changeBgImg"></image>
				<view class="grace-columns grace-flex-vcenter" style="position: absolute;top: 150rpx;">
					<!-- 头像 -->
					<image :src="userinfo.userpic" lazy-load style="width: 150rpx;height: 150rpx;border-radius: 100%;"></image>
					<!-- 姓名性别年龄 -->
					<view class="grace-flex-center grace-flex-vcenter" style="margin: 20rpx 0;">
						<text class="grace-white grace-bold" style="margin-right: 10rpx;font-size: 40rpx;text-shadow: 2rpx 2rpx 10rpx #333333;">{{ userinfo.username }}</text>
						<view class="grace-tags grace-border-radius grace-white grace-bold" style="border: 3rpx solid #FFFFFF;" :class="userinfo.sex === 0 ? 'grace-bg-blue' : 'grace-bg-pink'">
							<text class="iconfont" style="font-size: 20rpx;" :class="userinfo.sex === 0 ? 'icon-nan' : 'icon-nv'"></text>
							<text style="margin-left: 5rpx;font-size: 22rpx;">{{ userinfo.age }}</text>
						</view>
					</view>
					<!-- 关注按钮 -->
					<view
						class="iconfont"
						:class="userinfo.isFollow ? 'active' : 'icon-zengjia'"
						style="background-color: #FFE933; padding: 10rpx 15rpx; border-radius: 10rpx;"
						@click.stop="follow"
					>
						<text>{{ userinfo.isFollow ? '已关注' : '关注' }}</text>
					</view>
				</view>
			</view>
			<view class="user-space-content grace-flex-center" style="border-bottom: 20rpx solid #F4F4F4;">
				<!-- 横向数据 -->
				<graceBoxBanner :fontSize="['36rpx', '24rpx', '32rpx']" :items="items" style="width: 700rpx;"></graceBoxBanner>
			</view>
			<graceNavBar
				class="nav-bar grace-margin-top"
				:items="tabs"
				:isCenter="true"
				activeLineRadius="20rpx"
				activeDirection="center"
				textAlign="center"
				color="#969696"
				lineHeight="40rpx"
				:size="250"
				activeLineWidth="50rpx"
				activeLineHeight="10rpx"
				activeLineBg="#FEDE33"
				:currentIndex="currentIndex"
				@change="navChange"
			></graceNavBar>
			<block v-for="(item, index) in tablist" :key="index">
				<template v-if="currentIndex === 0 && index === 0">
					<!-- 主页 -->
					<view style="padding: 20rpx 30rpx;">
						<view class="user-info-item">
							<view class="grace-black grace-h4">账号信息</view>
							<view class="grace-margin-top">糗龄：{{ getRegAge }}</view>
							<view style="margin-top: 10rpx;">ID：{{ userinfo.id }}</view>
						</view>
						<view class="user-info-item">
							<view class="grace-black grace-h4">个人信息</view>
							<view class="grace-margin-top">星座：{{ getXingZuo }}</view>
							<view style="margin-top: 10rpx;">职业：{{ userinfo.job }}</view>
							<view style="margin-top: 10rpx;">故乡：{{ userinfo.path }}</view>
							<view style="margin-top: 10rpx;">情感状态：{{ userinfo.qg }}</view>
						</view>
					</view>
				</template>
				<template v-else-if="currentIndex === index">
					<template v-if="item.list.length > 0">
						<!-- 列表 -->
						<block v-for="(list, listindex) in item.list" :key="listindex"><news-list :item="list" :index="listindex"></news-list></block>
						<!-- 上拉加载 -->
						<graceLoading :loadingType="item.loadingType"></graceLoading>
					</template>
					<template v-else>
						<view class="empty-view grace-flex-center grace-flex-vcenter">
							<image class="empty-img" mode="widthFix" src="/static/image/nothing.png"></image>
						</view>
					</template>
				</template>
			</block>
			
			<!-- 操作菜单 -->
			<menu-popup :show="menuShow" @hideMenu="toogleMenu" :top="120">
				<view class="menu">
					<view @click.stop="lahei" hover-class="menu-hover">
						<text class="icon iconfont icon-sousuo"></text>
						<text style="font-size: 35rpx;">拉黑</text>
					</view>
					<view @click.stop="beizhu" hover-class="menu-hover">
						<text class="icon iconfont icon-qingchu"></text>
						<text style="font-size: 35rpx;">备注</text>
					</view>
				</view>
			</menu-popup>
		</view>
	</gracePage>
</template>

<script>
import t from '@/common/time.js';
export default {
	data() {
		return {
			menuShow:false,
			currentIndex: 0,
			tabs: ['主页', '糗事', '动态'],
			userinfo: {
				bgimg: 1,
				userpic: '/static/demo/userpic/19.jpg',
				username: 'JIA一勺',
				age: 20,
				sex: 0,
				isFollow: false,
				regtime: '2019-4-11',
				id: 1212,
				birthday: '1990-09-30',
				qg: '已婚',
				job: 'IT',
				path: '广东省-广州市-天河区'
			},
			items: [['10K', '', '获赞'], [11, '', '关注'], [12, '', '粉丝']],
			tablist:[ {},
								{
									loadingType:3,
									page:1,
									list:[
										// 文字
										{
											userpic:"../../static/demo/userpic/12.jpg",
											username:"哈哈",
											sex:0, //0 男 1 女
											age:25,
											isguanzhu:false,
											title:"我是标题",
											titlepic:"",
											video:false,
											share:false,
											path:"深圳 龙岗",
											sharenum:20,
											commentnum:30,
											goodnum:20
										},
										// 图文
										{
											userpic:"../../static/demo/userpic/12.jpg",
											username:"哈哈",
											sex:0, //0 男 1 女
											age:25,
											isguanzhu:false,
											title:"我是标题",
											titlepic:"../../static/demo/datapic/13.jpg",
											video:false,
											share:false,
											path:"深圳 龙岗",
											sharenum:20,
											commentnum:30,
											goodnum:20
										},
										// 视频
										{
											userpic:"../../static/demo/userpic/12.jpg",
											username:"哈哈",
											sex:0, //0 男 1 女
											age:25,
											isguanzhu:false,
											title:"我是标题",
											titlepic:"../../static/demo/datapic/13.jpg",
											video:{
												looknum:"20w",
												long:"2:47"
											},
											share:false,
											path:"深圳 龙岗",
											sharenum:20,
											commentnum:30,
											goodnum:20
										},
									]
								},
								{
									loadingType:3,
									page:1,
									list:[
										// 文字
										{
											userpic:"../../static/demo/userpic/12.jpg",
											username:"哈哈",
											sex:0, //0 男 1 女
											age:25,
											isguanzhu:false,
											title:"我是标题",
											titlepic:"",
											video:false,
											share:false,
											path:"深圳 龙岗",
											sharenum:20,
											commentnum:30,
											goodnum:20
										},
										// 图文
										{
											userpic:"../../static/demo/userpic/12.jpg",
											username:"哈哈",
											sex:0, //0 男 1 女
											age:25,
											isguanzhu:false,
											title:"我是标题",
											titlepic:"../../static/demo/datapic/13.jpg",
											video:false,
											share:false,
											path:"深圳 龙岗",
											sharenum:20,
											commentnum:30,
											goodnum:20
										},
										// 视频
										{
											userpic:"../../static/demo/userpic/12.jpg",
											username:"哈哈",
											sex:0, //0 男 1 女
											age:25,
											isguanzhu:false,
											title:"我是标题",
											titlepic:"../../static/demo/datapic/13.jpg",
											video:{
												looknum:"20w",
												long:"2:47"
											},
											share:false,
											path:"深圳 龙岗",
											sharenum:20,
											commentnum:30,
											goodnum:20
										},
									]
								},
							]
		};
	},
	computed: {
		getBgImg() {
			return '/static/bgimg/' + this.userinfo.bgimg + '.jpg';
		},
		getRegAge() {
			return t.gettime.sumAge(this.userinfo.regtime);
		},
		getXingZuo() {
			return t.gettime.getHoroscope(this.userinfo.birthday);
		}
	},
	// 上拉触底事件
	onReachBottom() {
		if (this.currentIndex === 0) {
			return false;
		}
		// 判断加载状态避免多次滚动时有加载尚未完成
		if (this.tablist[this.currentIndex].loadingType === 2 || this.tablist[this.currentIndex].loadingType === 4) {
			return false;
		}
		// 上拉加载
		this.loadMore();
	},
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			this.toogleMenu();
		} 
	},
	methods: {
		changeBgImg() {
			let no = parseInt(this.userinfo.bgimg);
			this.userinfo.bgimg = no < 4 ? ++no : 1;
		},
		follow() {
			this.userinfo.isFollow = !this.userinfo.isFollow;
		},
		navChange(index) {
			this.currentIndex = index;
		},
		toogleMenu(){
			this.menuShow = !this.menuShow;
		},
		// 拉黑
		lahei(){
			console.log("拉黑")
			this.togleShow();
		},
		// 备注
		beizhu(){
			console.log("备注")
			this.togleShow()
		},
		loadMore(){
			let item = this.tablist[this.currentIndex]
			item.loadingType = 1
			//追加数据(延迟1秒 模拟网络请求)
			setTimeout(() => {
				if (item.page > 3) {
					item.loadingType = 2;
					return;
				}
			
				item.list.push({
						userpic:"../../static/demo/userpic/12.jpg",
						username:"哈哈",
						sex:0, //0 男 1 女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/13.jpg",
						video:false,
						share:false,
						path:"深圳 龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
					});
			
				// 页码增加
				item.page++;
				setTimeout(() => {
					item.loadingType = 3;
				}, 300);
			}, 1000);
		}
	}
};
</script>

<style lang="stylus">
.active
	background-color transparent !important
	color #FFFFFF
	border 1rpx solid #FFFFFF
.user-space-content
	background-color #FFFFFF
	position relative
	z-index 10
	border-top-left-radius 20rpx
	border-top-right-radius 20rpx
	margin-top -15rpx
.user-info-item
	border-bottom 1rpx solid #CCCCCC
	padding 30rpx 0
	color #AAAAAA
.menu
		view
			padding 20rpx
			.icon
				margin-right 15rpx
				font-weight bold
		.menu-hover
			background #EEEEEE
.empty-view
	background #FFFFFF
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	.empty-img
		width 40%
</style>
